<template>
  <div class="register-page">
    <div class="register-left">
      <div class="left-inner">
        <div class="hot-badge">热门平台热点</div>
        <h2 class="welcome">欢迎加入</h2>
        <p class="desc">注册后即可体验平台的实时热点追踪与数据洞察。</p>
        <div class="feature">
          <i class="el-icon-lightning"></i>
          <span>实时热点追踪</span>
        </div>
        <div class="feature">
          <i class="el-icon-data-analysis"></i>
          <span>趋势可视化</span>
        </div>
        <div class="feature">
          <i class="el-icon-s-check"></i>
          <span>安全可靠</span>
        </div>
      </div>
    </div>
    <div class="register-right">
      <div class="form-wrapper">
        <div class="form-title">创建账户</div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
          <el-form-item prop="username">
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="邮箱或用户名"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="设置密码（至少 6 位）"
              name="password"
              tabindex="2"
              auto-complete="on">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              <i class="toggle-eye" :class="passwordType === 'password' ? 'el-icon-view' : 'el-icon-view-off'" slot="suffix" @click="showPwd"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="againPassword">
            <el-input
              :key="passwordType + '-again'"
              v-model="loginForm.againPassword"
              :type="passwordType"
              placeholder="确认密码"
              tabindex="3"
              auto-complete="on">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>

          <el-button :loading="loading" class="btn-register" type="primary" @click.native.prevent="handleRegister">
            注册
            <i class="el-icon-right"></i>
          </el-button>

          <div class="form-footer">
            <span>已经有账号?</span>
            <a class="link" @click.prevent="$router.push('/login')">去登录</a>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

import registerUser from '@/api/register'
import { validUsername } from '@/utils/validate'

export default {
  name: 'Register',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    const validateAgainPassword = (rule, value, callback) => {
      if (value !== this.loginForm.password) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: '',
        againPassword: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        againPassword: [{ required: true, trigger: 'blur', validator: validateAgainPassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleRegister() {
      this.$refs.loginForm.validate(valid => {
        if (!valid) return
        registerUser.registerUser(this.loginForm).then(resp => {
          this.$message({
            message: resp.message,
            type: 'success'
          })
          this.$router.push('/login')
        })
      })
    }
  }
}
</script>

<style lang="scss">
.login-form {
  .el-input__inner { height: 44px; }
}
.toggle-eye { cursor: pointer; }
</style>

<style lang="scss" scoped>
$leftGradientStart: #6a11cb;
$leftGradientEnd: #2575fc;
$rightBg: #ffffff;
$textSubtle: #6b7280;
$titleColor: #111827;

.register-page {
  display: flex;
  min-height: 100vh;
}

.register-left {
  flex: 1;
  background: linear-gradient(135deg, $leftGradientStart 0%, $leftGradientEnd 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-inner { width: 520px; max-width: 86%; }
.hot-badge { font-size: 14px; opacity: 0.9; margin-bottom: 16px; }
.welcome { font-size: 36px; margin: 0 0 12px; }
.desc { line-height: 1.8; opacity: 0.9; margin-bottom: 24px; }
.feature { display: flex; align-items: center; background: rgba(255,255,255,0.15); border-radius: 10px; height: 48px; padding: 0 16px; margin-bottom: 14px; i { margin-right: 10px; } }

.register-right { flex: 1; background: $rightBg; display: flex; align-items: center; justify-content: center; }
.form-wrapper { width: 420px; }
.form-title { font-size: 22px; color: $titleColor; margin-bottom: 20px; }
.btn-register { width: 100%; height: 44px; background: linear-gradient(90deg, #5b8def 0%, #7b5bf2 100%); border: none; }
.form-footer { color: $textSubtle; margin-top: 16px; .link { color: #6366f1; cursor: pointer; margin-left: 6px; } }
</style>
